<template>
    <el-col :span="item.span" class="new-form-item" :style="{height: item.height}">
      <span v-if="item.type == 'title'"
            :style="item.styles"
            style="text-align: center; display: block">
            <span v-if="item.value.indexOf('$store') !== -1">{{storeValue}}</span>
            <span v-else>{{item.value}}</span>
      </span>
      <div
        v-else-if="item.type == 'header'"
        :style="{
          background: item.background,
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          height: '100%',
          width: '100%',
        }"
      >
        <span :style="item.styles">{{ item.value }}</span>
        <span :style="item.subStyle">{{ item.subValue }}</span>
      </div>
      <el-image
        v-else-if="item.type == 'imgView'"
        :style="{ width: `${item.width}px` }"
        :src="item.prop"
        fit="fill"
      >
        <div slot="error" style="text-align: center">
          <i class="el-icon-picture-outline"></i>
        </div>
      </el-image>
      <el-button v-else-if="item.type == 'attachments'" type="text"
        >附件查看</el-button
      >
      <avue-date v-else-if="['dates', 'date', 'datetime', 'datetimerange', 'daterange', 'week', 'month', 'year'].includes(item.type)"
                v-bind="Object.assign(deepClone(item), params, { size:item.size || 'small' })"
                :multiple="false"
                :placeholder="item.placeholder || getPlaceholder(item)"
                :dic="item.dicData"
                v-model="dataTime"
      ></avue-date>
      <component v-else
                :is="getComponent(item.type, item.component)"
                v-bind="Object.assign(deepClone(item), params, { size:item.size || 'small' })"
                :multiple="false"
                :placeholder="item.placeholder || getPlaceholder(item)"
                :dic="item.dicData"
                :value="['time', 'timerange', 'checkbox'].includes(item.type) ? item.dicData: undefined">
        <span v-if="params.html"
              v-html="params.html"></span>
      </component>
    </el-col>
</template>
<script>
import _ from 'lodash'
export default {
  name: 'widget-form-item',
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      }
    },
    params: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      form: {},
      dataTime: new Date(),
      storeValue:''
    }
  },
  created() {
    if (this.item.value && this.item.value.indexOf('$store') !== -1) {
      this.storeValue = _.get(this, this.item.value)
    }
  },
  methods: {
    getComponent (type, component) {
      let KEY_COMPONENT_NAME = 'avue-';
      let result = 'input';
      if (component) return component
      else if (['array', 'img', 'url'].includes(type)) result = 'array';
      else if (type === 'select') result = 'select';
      else if (type === 'radio') result = 'radio';
      else if (type === 'checkbox') result = 'checkbox';
      else if (['time', 'timerange'].includes(type)) result = 'time';
      // else if (['dates', 'date', 'datetime', 'datetimerange', 'daterange', 'week', 'month', 'year'].includes(type))
      //   result = 'date';
      else if (type === 'cascader') result = 'cascader';
      else if (type === 'number') result = 'input-number';
      else if (type === 'password') result = 'input';
      else if (type === 'switch') result = 'switch';
      else if (type === 'rate') result = 'rate';
      else if (type === 'upload') result = 'upload';
      else if (type === 'slider') result = 'slider';
      else if (type === 'dynamic') result = 'dynamic';
      else if (type === 'icon') result = 'input-icon';
      else if (type === 'color') result = 'input-color';
      else if (type === 'map') result = 'input-map';
      return KEY_COMPONENT_NAME + result;
    },
    getPlaceholder (item) {
      const label = item.label;
      if (['select', 'checkbox', 'radio', 'tree', 'color', 'dates', 'date', 'datetime', 'datetimerange', 'daterange', 'week', 'month', 'year', 'map', 'icon'].includes(item.type))
        return `请选择 ${label}`;
      else return `请输入 ${label}`;
    },
  }
}
</script>
<style lang="scss" scoped>
.new-form-item{
    height: 100%;
    min-height: 50px;
    padding: 0;
    margin: 0;
    position: relative;
    border-left: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-pack: center;
    -ms-flex-align: center;
    align-items: center;
}
</style>
